<template>
    <div class="top">
      <div class="animate__animated animate__backInLeft">
    <el-time-picker
    :editable='false'
    v-model="values"
    @change="changetime"
    placeholder="播放任意时间点">
  </el-time-picker>
      </div>
    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        name: 'topandmiddle',
        data() {
            return {
                values: new Date(2021, 6, 23, 0, 0),
                time: '',
                ip: window.location.hostname,
                resdata: [],
                arr2: [],
                ip: '',
                inputTime: '',
                datavalue: ''
            }
        },
        methods: {
            changetime(val) {
                this.time = val
                const that = this
                const times = this.time.toString()

                function getUsertiem() {
                    return axios.get('http://' + that.ip + ':5000/time', {
                        params: {
                            tiemsdata: times.substring(16, 24)
                        }
                    }).then((res) => {
                        that.resdata = Array.from(new Set(res.data))

                        // console.log(that.resdata)
                        // for (let i = 0; i < that.resdata.length; i++) {
                        //   const index = that.resdata
                        //   const indexdata = index[i].match(times.substring(16, 24))
                        //   if (indexdata != null) {
                        //     const indexdatalist = indexdata.input
                        //     const n = indexdatalist.indexOf(times.substring(16, 24))
                        //     let n2 = indexdatalist.slice(n - 20, n - 18)
                        //     if (isNaN(n2)) {
                        //       n2 = indexdatalist.slice(n - 19, n - 18)
                        //       console.log(123546)
                        //     }
                        //     const result = n.substring(n, n.length)
                        //     console.log(n2.length + '这是n2的长度')
                        //     console.log(index)
                        //     console.log(n2 + '这是n2取的值')
                        //     console.log(result)
                        //     console.log(indexdata.length)
                        //     console.log(i)
                        //   }
                        // }

                        that.getDatas()

                        //获取用户选择的时间并将时分秒存入数组中
                        let times_arr = times.substring(16, 24).split(":");
                        // 将用户选择的时间转化为以秒为单位的时间
                        let inputTime =
                            parseInt(times_arr[0]) * 60 * 60 +
                            parseInt(times_arr[1]) * 60 +
                            parseInt(times_arr[2]);
                        // 获取用户输入的 时 分 秒
                        that.inputTime = times.substring(16, 24)
                            //遍历存放视频时间线的数组
                            // 将视频时间线与选择的时间对比如果选择的的时间在视频的起始时间和结束时间之间就跳到相对应的时间线的视频
                        that.arr2.some(item => {
                            // console.log(item);
                            // 将视频的时间线(起始时间)分割为一个数组
                            let videosTimeArr = item.videosTime.split(":");
                            // 将视频的持续时间分割为一个数组
                            let lastTimeArr = item.lastTime.split(":");
                            // 将视频的时间线转化为秒
                            let videosSeconds = parseInt(videosTimeArr[0]) * 60 * 60 + parseInt(videosTimeArr[1]) * 60 + parseInt(videosTimeArr[2])
                                // 将视频的持续时间转化为秒
                            let lastSeconds = parseInt(lastTimeArr[0]) * 60 * 60 + parseInt(lastTimeArr[1]) * 60 + parseInt(lastTimeArr[2])
                                // 计算视频的结束时间
                            let overTime = videosSeconds + lastSeconds;
                            // 如果用户输入的时间在视频的起始时间和结束时间之间就选出对应的视频 id和时间码 方便后面发 axios 请求将 id，时间码 传给设备，设备根据 id和时间码 跳转到对应时间线的视频
                            if (videosSeconds <= inputTime && inputTime <= overTime) {
                                // console.log(item);
                                if (videosSeconds == inputTime || inputTime == lastSeconds) {
                                    that.datavalue = that.inputTime + `:${videosTimeArr[3]}`
                                } else {
                                    that.datavalue = that.inputTime + ':00'
                                }

                                // console.log(this.datavalue);
                                that.id = item.id
                                that.$message({
                                    message: `视频已切换到:${that.datavalue}`,
                                    type: "success"
                                });

                                return true

                            } else {
                                that.datavalue = "";
                                that.id = "";
                            }
                        })


                        // const arrdata = that.resdata.filter((value) => {
                        //   return value !== '\'109 out of range\\r\\n\''
                        // })
                        // console.log(vale)
                        // console.log(that.resdata.match('109 out of range'))
                        // that.resdata.forEach((itme) => {
                        //   console.log(itme)
                        // })
                        // const resstring = that.resdata.toString()
                        // console.log(n.length)
                        // for (let i = 0; i < resstring.length; i++) {
                        //   console.log(resstring[i].replace(/\rn/g))
                        // }
                        // for (const iterator of resstring) {
                        //   console.log('循环字符串' + iterator)
                        // }
                        // console.log(n)
                        // console.log(Array.from(new Set(res.data)))

                        // if (res) {
                        //   that.$message({
                        //     message: '你好，设备时间设置成功',
                        //     type: 'success'
                        //   })
                        // }

                        if (this.datavalue === "") {
                            this.$message({
                                message: "你好，当前选择的时间线不存在",
                                type: "warning"
                            });
                        } else {
                            // 发送 axios 请求将 datavalue,id 传给服务器
                            axios.get("http://" + that.ip + ":5000/dataclip", {
                                params: {
                                    datavalue: that.datavalue,
                                    id: that.id
                                }
                            }).then(res => {
                                // 该请求是为了响应后端的 TCP 服务器，TCP服务器负责连接设备，这时候已经拿到了前端传过来的 datavalue,id 就可以将 datavalue,id 传给设备了，设备根据这个值跳转到对应时间线的视频
                                axios.get("http://" + that.ip + ":9993");
                                // console.log(res);
                            })
                        }
                    }).catch((error) => {
                        that.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
                    })
                }

                // function getUsergetiem () {
                //   return axios.get('http://' + that.ip + ':9993', {
                //     params: {
                //       getTime: that.getTimes
                //     }
                //   })
                // }
                // axios.all([getUsertiem(), getUsergetiem()])

                getUsertiem();

                this.values = new Date(2021, 6, 23, 0, 0)
            },

            getDatas() {
                this.resdata.forEach(item => {
                    // 拿到后台返回的视频字符串去匹配 'mov'
                    let data = item.match('mov')
                        // 如果 data 存在说明匹配成功
                    if (data) {
                        // 获取匹配成功后的视频字符串
                        let input = data.input
                            // 将该字符串分割为一个数组
                        let videosArr = input.split("\\r\\n");
                        videosArr.forEach(val => {
                            // 该对象的作用是用来存放 视频的 id 起始时间和结束时间
                            let obj = {}
                                // 将每一项含有 " 的字符串替换为空
                            val = val.replace(/"/, '')
                                // 匹配含有 Capture 的字符串如果匹配成功可以获得视频的起始时间、持续时间和 id
                            if (val && /Capture/.test(val)) {
                                // 将匹配成功后的字符串(该字符串含有视频的起始时间、持续时间和 id )分割为一个数组
                                let strArr = val.split(":")
                                    // 将 id 存入 obj 中
                                obj.id = strArr[0]
                                    // 获得字符串 v 的索引
                                let index = val.indexOf('v')
                                    // 根据该索引获得视频的起始时间字符串和结束时间字符串并存入到 obj 对象中
                                obj.videosTime = val.slice(index + 2, index + 13)
                                obj.lastTime = val.slice(index + 14, index + 25)
                                    // 把 obj 对象存入数组中
                                this.arr2.push(obj)
                            }
                        })
                    }
                })
                return this.arr2
            }
        }
    }
</script>
<style lang="scss">
    /* 去掉了scoped 会造成全局渲染，注意 */
    
    .el-time-panel__content::after,
    .el-time-panel__content::before {
        height: 33px !important;
        border-top: 2px solid #E4E7ED !important;
        border-bottom: 2px solid #E4E7ED !important
    }
    
    .el-time-spinner__item {
        font-size: 35px !important
    }
    
    .el-time-panel {
        width: 400px !important;
    }
    
    .top .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 400px !important;
    }
    
    .el-time-panel__footer {
        height: 55px !important;
    }
    
    .el-time-panel__btn {
        line-height: 45px !important;
        font-size: 20px !important;
    }
</style>